
<style type='text/css'>
    #poster {
        width:320px;height:320px;border:1px solid #ccc;position:relative
    }
   #poster .bg { position:absolute;width:100%;z-index:0}
   #poster .drag[type=img] img,#poster .drag[type=thumb] img { width:100%;height:100%; }

   #poster .drag { position: absolute; width:80px;height:80px; border:1px solid #000; }

    
    #poster .drag[type=nickname] { width:80px;height:40px; font-size:16px; font-family: 黑体;}
    #poster .drag img {position:absolute;z-index:0;width:100%; }
    
    #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
            position:absolute;
            width:7px;
            height:7px;
            z-index:1;
            font-size:0;
    }    
 

       #poster .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
              background:#C00;
       }

    .rLeftDown,.rRightUp{cursor:ne-resize;}
    .rRightDown,.rLeftUp{cursor:nw-resize;}
    .rRight,.rLeft{cursor:e-resize;}
    .rUp,.rDown{cursor:n-resize;}
    .rLeftDown{left:-4px;bottom:-4px;}
    .rRightUp{right:-4px;top:-4px;}
    .rRightDown{right:-4px;bottom:-4px;}

            .rRightDown{background-color:#00F;}   

    
    .rLeftUp{left:-4px;top:-4px;}
    .rRight{right:-4px;top:50%;margin-top:-4px;}
    .rLeft{left:-4px;top:50%;margin-top:-4px;}
    .rUp{top:-4px;left:50%;margin-left:-4px;}
    .rDown{bottom:-4px;left:50%;margin-left:-4px;}
    .context-menu-layer { z-index:9999;}
    .context-menu-list { z-index:9999;}

</style>
<ul class="nav nav-tabs" style="margin-top:-28px">
	<li><a href="javascript:;" ng-click="access_json('list')">返回列表</a></li>
</ul>
<div class="form-group">

    <div class="col-sm-12">
        <table style='width:100%;'>
            <tr>
                <td style='width:320px;padding:10px;' valign='top'>
                    <div id='poster'>
                       
                        <img ng-src="{{tomedia(pagedata.item.image)}}" class='bg'/>
                        <div class="drag"  id="qr" index="1" style="zindex:1;" ng-style="pagedata.item.position">       
                            <img src="../addons/jy_move/images/qr.jpg" />                       
                            <div class="rRightDown"> </div><div class="rLeftDown"> </div><div class="rRightUp"> </div><div class="rLeftUp"> </div><div class="rRight"> </div><div class="rLeft"> </div><div class="rUp"> </div><div class="rDown"></div>
						</div>
                    </div>
                </td>
                <td valign='top' style='padding:10px;'>
                   
                
                                                        
									<div class="col-xs-12 col-sm-8 col-lg-9">
										<div class="input-group">
											<input type="text" ng-model="pagedata.item.image" class="form-control" autocomplete="off">
											<span class="input-group-btn">
												<button class="btn btn-default" type="button" ng-click="image(pagedata.item,'image')">选择背景图片</button>
											</span>
										</div>
										（图片尺寸建议320*320）
										<div class="input-group" style="margin-top:.5em;">
											<img ng-src="{{tomedia(pagedata.item.image) || '../core/resource/images/nopic.jpg'}}" class="img-responsive img-thumbnail" width="150" />
										</div>
									</div>
							
							                                       
                       
               
                    
                </td>
            </tr>
        </table>
    </div>
</div>
<input type="submit" value="提交" onclick="submit()" class="btn btn-primary"  />
<script language='javascript' src="../addons/jy_move/js/designer.js"></script>
<script language='javascript'>

        //function bindEvents(obj){
            var obj=$("#qr");
              var index = obj.attr('index');
              
            var rs = new Resize(obj, { Max: true, mxContainer: "#poster" });
            rs.Set($(".rRightDown",obj), "right-down");
            rs.Set($(".rLeftDown",obj), "left-down");
            rs.Set($(".rRightUp",obj), "right-up");
            rs.Set($(".rLeftUp",obj), "left-up");
            rs.Set($(".rRight",obj), "right");
            rs.Set($(".rLeft",obj), "left");
            rs.Set($(".rUp",obj), "up");
            rs.Set($(".rDown",obj), "down"); 
            rs.Scale = true;
            var type = obj.attr('type');
            new Drag(obj, { Limit: true, mxContainer: "#poster" });
            $('.drag .remove').unbind('click').click(function(){
                $(this).parent().remove();
            })
			function submit(){			
			var data = {};
            var obj=$("#qr");
            var type = 'qr';
            var left = obj.css('left'),top = obj.css('top');
            var d= {left:left,top:top,width:obj.css('width'),height:obj.css('height'),image:scope.pagedata.item.image,id:scope.pagedata.item.id};          
            data.data = d;
			data.op = 'design';
			console.log(data);
			scope.post_json(data);
        }
		
 
	
    </script>